<template>
  <div>
    <el-card class="app-container">
      <c-u-r-d-table :option="option" ref="table"/>
    </el-card>
    <dialog-columns-form
      v-model="formData"
      width="900px"
      title="跟进"
      :visible.sync="followDialogShowed"
      :columns="followColumns"
      @submit="handleSubmitFollow"
    />
  </div>

</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import YesNoEnum from '@/infra/constant/YesNoEnum'
import {complainFollowUpApi} from '@/feature/cmt/infra/api/complainFollowUpApi'
import CURDTable from '@/framework/components/table/CURDTable'
import DialogColumnsForm from "@/framework/components/form/DialogColumnsForm";
import ComplainFollowUpStatusEnum from "@/feature/cmt/infra/constants/ComplainFollowUpStatusEnum";
import CheckStatusEnum from "@/infra/constant/CheckStatusEnum";
import {storeApi} from "@/feature/mct/infra/api/storeApi";
import ComplainTypeEnum from "@/feature/cmt/infra/constants/ComplainTypeEnum";

export default {
  components: {DialogColumnsForm, CURDTable},
  data() {
    return {
      currentRow: {},
      formData: {},
      exportOption: {
        remote: true
      },
      followColumns: [

        {
          label: '是否已完成',
          required: true,
          type: ColumnType.RADIO,
          options: YesNoEnum,
          prop: 'finishFlag'
        },
        {
          label: '最终扣分',
          required: true,
          type: ColumnType.NUMBER,
          prop: 'finalReducePoints'
        }, {
          label: '累计扣分',
          required: true,
          type: ColumnType.NUMBER,
          prop: 'accReducePoints'
        },
        {
          label: '跟进记录',
          type: ColumnType.TEXTAREA,
          rows: 5,
          span: 24,
          prop: 'followUpRecords',
          required: true
        }
      ],
      followDialogShowed: false,
      option: {
        requestApi: complainFollowUpApi,
        showSelection: false,
        columns: [
          {
            label: '店铺',
            prop: 'storeId',
            searchable: true,
            type: ColumnType.SELECT,
            required: true,
            options: storeApi.options()
          },
          {
            label: '违规编号',
            searchable: true,
            width: 130,
            prop: 'complainNo',
            required: true
          }, {
            label: '原图链接',
            searchable: true,
            width: 120,
            viewAsLink: true,
            prop: 'tbLink',
            required: true
          },
          {
            label: '违规时间',
            width: 120,
            required: true,
            searchable: true,
            type: ColumnType.DATE,
            prop: 'complainTime'
          },
          {
            label: '投诉类型',
            required: true,
            width: 120,
            searchable: true,
            type: ColumnType.SELECT,
            options: ComplainTypeEnum,
            prop: 'complainType'
          },
          {
            label: '扣分',
            width: 80,
            prop: 'reducePoints',
            type: ColumnType.NUMBER
          },
          {
            label: '图片',
            width: 100,
            prop: 'pic',
            type: ColumnType.IMAGE
          },
          {
            label: '货号/ID',
            searchable: true,
            width: 100,
            prop: 'itemNo'
          },
          {
            label: '登记时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'registrationTime'
          },
          {
            label: '状态',
            hiddenInForm: true,
            width: 100,
            type: ColumnType.SELECT,
            searchable: true,
            options: ComplainFollowUpStatusEnum,
            prop: 'status'
          },
          {
            label: '已完成',
            width: 100,
            required: true,
            searchable: true,
            type: ColumnType.RADIO,
            options: YesNoEnum,
            prop: 'finishFlag'
          },
          {
            label: '最终扣分',
            width: 80,
            required: true,
            type: ColumnType.NUMBER,
            prop: 'finalReducePoints'
          }, {
            label: '累计扣分',
            required: true,
            width: 80,
            type: ColumnType.NUMBER,
            prop: 'accReducePoints'
          }, {
            label: '处理结果',
            required: true,
            width: 200,
            type: ColumnType.TEXT,
            prop: 'handleResult'
          }, {
            label: '连接处理结果',
            required: true,
            width: 200,
            type: ColumnType.TEXT,
            prop: 'conHandleResult'
          }, {
            label: '撤销投诉金额',
            required: true,
            width: 120,
            type: ColumnType.TEXT,
            prop: 'payOuts'
          },
          {
            label: '跟进记录',
            width: 200,
            type: ColumnType.TEXTAREA,
            rows: 5,
            span: 24,
            prop: 'followUpRecords',
            required: true
          },
          {
            label: '备注',
            width: 180,
            type: ColumnType.TEXTAREA,
            span: 24,
            prop: 'remark'
          },
          {
            label: '审核状态',
            width: 100,
            hiddenInForm: true,
            type: ColumnType.RADIO,
            searchable: true,
            options: CheckStatusEnum,
            prop: 'checkStatus'
          },
          {
            label: '审核备注',
            width: 200,
            hiddenInForm: true,
            prop: 'checkResult'
          }, {
            label: '登记人',
            width: 100,
            hiddenInForm: true,
            prop: 'registrantName'
          }, {
            label: '跟进人',
            width: 100,
            hiddenInForm: true,
            prop: 'followUpManName'
          }, {
            label: '审核人',
            width: 100,
            hiddenInForm: true,
            prop: 'checkerName'
          }
        ]
      }
    }
  },
  methods: {
    async handleSubmitFollow({done}) {
      try {
        await complainFollowUpApi.follow(this.formData)
        this.$refs.table.reloadTable()
        this.followDialogShowed = false
      } finally {
        done()
      }
    },
    async handleRejectFollow({arg}) {
      const {value} = await this.$prompt('确认拒绝跟进所选记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '拒绝理由不能为空'
      })
      await complainFollowUpApi.followReject({id: arg.id, remark: value})
      this.$refs.table.reloadTable()
    },
    handleFollow({arg}) {
      this.followDialogShowed = true
      // this.currentRow = arg
      this.formData = arg
      // this.$confirm('确定跟进吗', '提示').then(() => {
      //   complainFollowUpApi.follow()
      // })
    }
  }
}
</script>

